<template>
  <div class="category">
    <Breadcrumb></Breadcrumb>
    <div class="wrapper">
        
    <div class="tree">
    <el-tree
      :data="data" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false"
      :render-content="renderContent">
    </el-tree>
    </div>
  </div>

    <!-- 弹框  -->
    <tanchuang :title="title" ref="child" :type="type"></tanchuang>
    <div class="table">
      <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="Pid"
        label="Pid"
        width="50">
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称"
        width="80">
      </el-table-column>
      <el-table-column
        prop="address"
        label="访问地址">
      </el-table-column>
      <el-table-column
        prop="imgAddress"
        label="图片地址">
      </el-table-column>
    </el-table>
    </div>
</div>

  </template>
  
  <script>
  import tanchuang from './tanchuang.vue'
  export default {
    components:{
      tanchuang
    },
      data() {
          return {
            title:'标题',
            type:1,// 1 新增 2 修改
         data : [{               
          label: '广告',
          children: [{           
            label: '并夕夕',
            children:[{           
            label: '双11购物节',
            children:[{          
            label: '百亿补贴'
            }]
            }]
          }, {          
            label: '澳门威尼斯',
            children:[{          
            label: '东京不太热'
            }]
          }, {           
            label: '京东购物优惠',
            children:[{          
            label: '618购物节'
            }]
          }]
        }],
        tableData: [{
            Pid: '1',
            name: '王小虎',
            address: 'http://www.baidu.com',
            imgAddress:'http://www.bilibili.com'
          }, {
            Pid: '2',
            name: '王小虎',
            address: 'http://www.baidu.com',
            imgAddress:'http://www.bilibili.com'
          }, {
            Pid: '3',
            name: '王小虎',
            address: 'http://www.baidu.com',
            imgAddress:'http://www.bilibili.com'
          }, {
            Pid: '4',
            name: '王小虎',
            address: 'http://www.baidu.com',
            imgAddress:'http://www.bilibili.com'
          }]
      }
    },
  
     
      methods: {
        //新增 
        append(data) {
          console.log('新增---------',data);
          this.$refs.child.dialogVisible= true;
          this.title='新增 【广告】子集分类';
          this.type=1
  
        },
        //删除
        remove(node, data) {
          
        },
        //修改 
        update(){
          console.log('修改------------');
          this.$refs.child.dialogVisible= true;
          this.title='修改 【广告】 名称';
          this.type=2;
        },
        //树节点的内容区的渲染
        renderContent(h, { node, data, store }) {
         
          return (
            <span class="custom-tree-node">
              <span class='name'>{node.label}</span>
              {
                node.level == 1?<span>
                <el-button class="mini" on-click={() => this.append(data)} icon="el-icon-plus">新增</el-button>
                <el-button class="mini" on-click={() => this.update(node, data)} icon="el-icon-edit">修改</el-button>
                <el-button class="mini" type="danger" on-click={() => this.remove(node, data)} icon="el-icon-delete">删除</el-button>
              </span>:<span>
                <el-button class="mini" on-click={() => this.update(node, data)} icon="el-icon-edit">修改</el-button>
                <el-button class="mini" type="danger" on-click={() => this.remove(node, data)} icon="el-icon-delete">删除</el-button>
              </span>
              }
            </span>
            );
        }
      }
    };
  </script>
  
  <style lang="less" scoped>
  .custom-tree-node{
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
  }
  
  .category{
    display: flex;
    align-items: center;
    
    margin: 10px;
  }
  
  .wrapper{
      padding: 10px;
      margin-top: 10px;
      background: #fff;
  }
  
  .table{
    width: 600px;
  }
  
  .tree{
      margin: 10px;
      widows: 400px;
  
  
      /deep/.mini{
      padding: 4px 10px;
      font-size: 14px;
    }
  
    /deep/.el-tree-node__content{
      margin-bottom: 10px;
    }
  }
  
  name{
      width: 300px;
      display: inline-block;
  }
  </style>
  
  